import { View, Image } from '@hips/taro-ui'
import Search from 'assets/icons/search-o.svg'
import Switch from 'assets/icons/switch.png'
import Styles from './user-info.module.less'
import { navigateTo } from '@tarojs/taro'
import RoleListPopup from 'components/role-list-popup'
import UserDetailPopup from './user-detail'
import SearchPopup from './search-popup'
import { munusGetFuncs } from 'tools'
import {
  // getUserInfo,
  getRolesList,
  getTenantsList,
  editRole,
  editTenant
} from 'request/api'
export default {
  name: 'userInfo',
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    userInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      showSearchPopup: false,
      showRole: false,
      showDetail: false,
      rolesList: [],
      tenantsList: [],
      menuList: []
    }
  },

  computed: {
    funcList() {
      return munusGetFuncs(this.dataSource) || []
    },
    /**
     * 当前选中的角色index
     * @returns
     */
    roleSelectedIndex() {
      return this.rolesList.findIndex(
        item => this.userInfo.currentRoleId === item.id
      )
    },
    /**
     * 当前选中的租户
     * @returns
     */
    tenantSelectedIndex() {
      return this.tenantsList.findIndex(
        item => this.userInfo.tenantId === item.tenantId
      )
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    /**
     * 页面初始化获取数据
     */
    init() {
      this.getRolesList()
      this.getTenantsList()
    },
    reload() {
      this.init()
      this.$emit('init')
    },

    /**
     * 获取租户列表
     */
    async getTenantsList() {
      const res = await getTenantsList()
      this.tenantsList = res
    },

    /**
     * 获取角色列表
     */
    async getRolesList() {
      const res = await getRolesList()
      this.rolesList = res
    },

    /**
     * 确定切换角色
     * @param {*} data
     */
    async confirmRole(data) {
      const res = await editRole(data.id)
      this.showRole = false
      this.reload()
    },

    /**
     * 确定切换租户
     * @param {*} data
     */
    async confirmTenant(data) {
      const res = await editTenant(data.tenantId)
      this.showDetail = false
      this.reload()
    },
    /**
     * 切换租户
     * @param {*} data
     */
    chengTend(data) {
      this.confirmTenant(data)
    },

    /**
     * 跳转到search
     */
    toSearch() {
      this.showSearchPopup = true
    },

    /**
     * 展示弹出框
     * @param {*} popup  弹出框类型
     */
    showPopup(popup) {
      this[popup] = true
    }
  },

  render() {
    const { realName, currentRoleName, favicon } = this.userInfo
    return (
      <View>
        <View class={Styles['user-info']}>
          <View class={Styles['user-info-detail']}>
            <Image
              onTap={() => this.showPopup('showDetail')}
              class={Styles['user-info-detail-icon']}
              src={favicon}
            ></Image>
            <View class={Styles['user-info-detail-text']}>
              <View class={Styles['user-info-detail-text-name']}>
                {realName}
              </View>
              <View class={Styles['user-info-detail-text-roleName']}>
                <View class={Styles['user-info-detail-text-roleName-text']}>
                  {currentRoleName}
                </View>
                <Image
                  onTap={() => this.showPopup('showRole')}
                  class={Styles['user-info-detail-text-roleName-switch']}
                  src={Switch}
                ></Image>
              </View>
            </View>
          </View>

          <Image
            class={Styles['user-info-search']}
            src={Search}
            onTap={this.toSearch}
          ></Image>
        </View>
        <SearchPopup
          vModel={this.showSearchPopup}
          funcList={this.funcList}
        ></SearchPopup>
        <UserDetailPopup
          vModel={this.showDetail}
          userDetail={this.userInfo}
          tandList={this.tenantsList}
          currentTendIndex={this.tenantSelectedIndex}
          vOn:chengTend={this.chengTend}
        ></UserDetailPopup>
        <RoleListPopup
          vModel={this.showRole}
          vOn:changeRole={this.confirmRole}
          source={this.rolesList}
          selectedIndex={this.roleSelectedIndex}
        ></RoleListPopup>
      </View>
    )
  }
}
